<template>
  
  <div id="app">
    <div class="maze">
      <div
        class="ball"
        ref="ball"
        :style="{ left: posX + 'px', top: posY + 'px', transform: `rotate(${rotation}deg)` }"
      ></div>
      <img
        class="zdz"
        src="../assets/u=2794641396,3597327455&fm=253&fmt=auto&app=138&f=JPEG.webp"
        alt=""
      />
      <Wall v-for="(wall, index) in wallPositions"
            :key="index"
            :width="wall.width"
            :height="wall.height"
            :left="wall.x"
            :top="wall.y"
      />
    </div>
    <div v-if="showAlert" class="alert">
      <div class="zml">
        <h1>恭喜你！</h1>
        <h2>成功来到林子的3000平方的厕所</h2>
      </div>
    </div>
  </div>
</template>

<script>
import Wall from '../components/pzcs.vue'; 

export default {
  components: {
    Wall // 注册组件
  },
  data() {
    return {
      posX: 10,
      posY: 10,
      rotation: 0,
      moveSpeed: 10,
      wallPositions: [
        { x: 0, y: 0, width: 1000, height: 2 },
        { x: 0, y: 70, width: 220, height: 2 },
        { x: 280, y: 0, width: 2, height: 720 },
        { x: 60, y: 140, width: 222, height: 2 },
        { x: -2, y: 0, width: 2, height: 800 },
        { x: 0, y: 210, width: 200, height: 2 },
        { x: 80, y: 280, width: 200, height: 2 },
        { x: 0, y: 360, width: 200, height: 2 },
        { x: 80, y: 430, width: 200, height: 2 },
        { x: 0, y: 500, width: 200, height: 2 },
        { x: 80, y: 570, width: 200, height: 2 },
        { x: 0, y: 640, width: 200, height: 2 },
        { x: 80, y: 720, width: 200, height: 2 },
        { x: 0, y: 798, width: 999, height: 2 },
        { x: 370, y: 80, width: 2, height: 720 },
        { x: 370, y: 80, width: 540, height: 2 },
        { x: 910, y: 80, width: 2, height: 650 },
        { x: 460, y: 160, width: 2, height: 570 },
        { x: 460, y: 160, width: 350, height: 2 },
        { x: 810, y: 160, width: 2, height: 480 },
        { x: 560, y: 640, width: 250, height: 2 },
        { x: 560, y: 270, width: 2, height: 370 },
        { x: 560, y: 270, width: 160, height: 2 },
        { x: 997, y: 0, width: 2, height: 800 },
        { x: 460, y: 728, width: 450, height: 2 }
      ],
      showAlert: false
    };
  },
  mounted() {
    window.addEventListener("keydown", this.moveBall);
  },
  beforeDestroy() {
    window.removeEventListener("keydown", this.moveBall);
  },
  methods: {
    moveBall(event) {
      let newPosX = this.posX;
      let newPosY = this.posY;

      switch (event.key) {
        case "w":
          newPosY -= this.moveSpeed;
          break;
        case "s":
          newPosY += this.moveSpeed;
          break;
        case "a":
          newPosX -= this.moveSpeed;
          this.rotation -= 30; 
          break;
        case "d":
          newPosX += this.moveSpeed; 
          this.rotation += 30; 
          break;
      }

      // 检查是否与墙壁碰撞
      if (!this.isColliding(newPosX, newPosY)) {
        this.posX = newPosX;
        this.posY = newPosY;

        // 检查是否到达图片位置
        if (this.isAtImagePosition()) {
          this.showAlert = true; // 显示提示框
        } else {
          this.showAlert = false; // 隐藏提示框
        }
      }
    },
    isColliding(x, y) {
      for (let wall of this.wallPositions) {
        if (
          x < wall.x + wall.width &&
          x + 35 > wall.x &&
          y < wall.y + wall.height - 2 &&
          y + 35 > wall.y
        ) {
          return true; // 碰撞
        } 
      }
      return false; // 没有碰撞
    },
    isAtImagePosition() {
      const imageLeft = 560; // 图片的左边界
      const imageTop = 270; // 图片的上边界
      const imageWidth = 250; // 图片的宽度
      const imageHeight = 360; // 图片的高度

      // 检查小球是否在图片范围内
      return (
        this.posX >= imageLeft &&
        this.posX <= imageLeft + imageWidth &&
        this.posY >= imageTop &&
        this.posY <= imageTop + imageHeight
      );
    }
  },
};
</script>
<style src="./xq.css">
</style>
